<template>
  <div class="container">
    <!-- 左侧 MV 与评论区 -->
    <div class="container-left">
      <MyVideo :url="url" :mvDetail="mvDetail" :mvInfo="mvInfo"></MyVideo>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 热门评论 -->
        <el-tab-pane :label="'热门(' + hotComments.total + ')'" name="first">
          <Comment :commentList="hotComments.comments"> </Comment>
          <div class="btn" v-show="isLoading && !noMoreHot">加载中...</div>
          <div class="btn" v-show="noMoreHot">没有更多了</div>
        </el-tab-pane>
        <!-- 最新品评论 -->
        <el-tab-pane :label="'最新(' + newComments.total + ')'" name="second">
          <Comment :commentList="newComments.comments"></Comment>
          <div class="btn" v-show="isLoading && !noMoreNew">加载中...</div>
          <div class="btn" v-show="noMoreNew">没有更多了</div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 右侧相似评论区 -->
    <div class="container-right">
      <Similar :mvSimilar="mvSimilar" @getNewMv="getNewMv"></Similar>
    </div>
  </div>
</template>

<script>
import {
  reqMvUrl,
  reqMvDetail,
  reqMvSimilar,
  reqMvCommentHot,
  reqMvCommentNew,
  reqMvInfo
} from '@/api/newMv'

import Comment from '@/components/CommentList.vue'
import MyVideo from './children/Video.vue'
import Similar from './children/Similar.vue'

import { mapMutations } from 'vuex'

export default {
  components: {
    MyVideo,
    Similar,
    Comment
  },
  data() {
    return {
      activeName: 'first',
      url: '',
      // mv 信息
      mvDetail: {},
      // 相似 mv 信息
      mvSimilar: {},
      // mv url 点赞 分享数
      mvInfo: {},
      // 请求参数
      paramsHot: {
        id: 0,
        type: 1,
        limit: 20,
        offset: 0
      },
      paramsNew: {
        id: 0,
        type: 1,
        limit: 20,
        offset: 0
      },
      // 热门评论
      hotComments: {
        comments: [],
        total: 0
      },
      // 最新评论
      newComments: {
        comments: [],
        total: 0
      },
      // 加载数据中
      isLoading: false,
      // 没有更多评论
      noMoreNew: false,
      noMoreHot: false
    }
  },
  created() {
    // 该标志为 true 时，才会触发加载更多事件
    this.updateLoadComment(true)
    // 监听加载更多事件
    this.$bus.$on('loadComment', this.showMore)
    this.getNewMv()
  },
  methods: {
    ...mapMutations('user', ['updateLoadComment']),
    // 刷新
    getNewMv() {
      this.getMvData()
      this.getMvInfo()
      this.getMvDetail()
      this.getCommentNew()
      this.getCommentHot()
      this.getMvSimilar()
    },
    // 获取 MV 地址
    async getMvData() {
      const id = window.sessionStorage.getItem('id')
      const { data: mvData } = await reqMvUrl(id)
      this.url = mvData.data.url
    },
    // 获取 MV 细节
    async getMvDetail() {
      const id = window.sessionStorage.getItem('id')
      const { data: mvDetail } = await reqMvDetail(id)
      this.mvDetail = mvDetail.data
    },
    // 获取最新 MV 评论
    async getCommentNew() {
      // 如果没有更多数据就不再发送请求
      if (this.noMoreNew) return
      this.isLoading = true
      this.paramsNew.id = window.sessionStorage.getItem('id')
      const { data: newComments } = await reqMvCommentNew(this.paramsNew)
      this.newComments.comments = [
        ...this.newComments.comments,
        ...newComments.comments
      ]
      this.newComments.total = newComments.total
      // 如果最新数据的长度 < 20 ,则没有更多评论
      if (newComments.comments.length < 20) this.noMoreNew = true
      this.isLoading = false
    },
    // 获取热门 MV 评论
    async getCommentHot() {
      // 如果没有更多数据就不再发送请求
      if (this.noMoreHot) return
      this.isLoading = true
      this.paramsHot.id = window.sessionStorage.getItem('id')
      const { data: hotComments } = await reqMvCommentHot(this.paramsHot)
      this.hotComments.comments = [
        ...this.hotComments.comments,
        ...hotComments.hotComments
      ]
      this.hotComments.total = hotComments.total
      // 如果最新数据的长度 < 20 ,则没有更多评论
      if (hotComments.hotComments.length < 20) this.noMoreHot = true
      this.isLoading = false
    },
    // 获取相识 MV 信息
    async getMvSimilar() {
      const id = window.sessionStorage.getItem('id')
      const { data: mvSimilar } = await reqMvSimilar(id)
      this.mvSimilar = mvSimilar.mvs
    },
    // MV 点赞分享等信息
    async getMvInfo() {
      const id = window.sessionStorage.getItem('id')
      const { data: mvInfo } = await reqMvInfo(id)
      this.mvInfo = mvInfo
    },
    // 监听评论栏切换
    handleClick(val) {
      this.activeName = val.name
    },
    // 显示更多最新评论
    showMore() {
      // 选中特定的栏目时才会调用特点的方法 ！！！
      if (this.activeName === 'first') {
        this.paramsHot.offset += 20
        this.getCommentHot()
      } else {
        this.paramsNew.offset += 20
        this.getCommentNew()
      }
    }
  },
  beforeDestroy() {
    // 销毁前重置
    this.updateLoadComment(false)
    this.$bus.$off('loadComment')
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-between;
  .container-left {
    width: 70%;

    .btn {
      margin: 0 auto;
      background: #fff;
      border-radius: 15px;
      padding: 5px 10px;
      cursor: pointer;
      width: 80px;
      text-align: center;
      font-size: 14px;
      border: 1px solid #cfd4db;
    }

    .btn:hover {
      color: red;
    }
  }

  .container-right {
    width: 25%;
  }
}
</style>
